import React, { useEffect, useState } from 'react'
import TodoFooter from '../../components/TodoFooter/TodoFooter'
import TodoHeader from '../../components/TodoHeader/TodoHeader'
import TodoMain from '../../components/TodoMain/TodoMain'

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import axios  from "../../utils"
import {ReqGetAll,ReqAddTodo,ReqDeleteTodo,ReqUpdateTodo,ReqCheckedAllDone,ReqDeleteOkDone} from "../../api/todolist"

import "./TodoList.css"

export default function TodoList() {

    //声明状态
    let [todolist,setTodolist] = useState([])


    // 添加一个todo
    let addTodo = async(title) =>{
            //发送请求 新增数据
            let data = await ReqAddTodo(title)

            //提示
            toast.success("添加成功");

            // console.log(result.data);
            //更新数据
            setTodolist([
                ...todolist,
                data
            ])
    }

    //删除某个todo     
    let deleteTodo = async (id) =>{

        //向后台发送请求 删除某个todo
        await ReqDeleteTodo(id);
        //提示
        toast.success("删除成功!")
        // 过滤数据   filter
        let newTodo = todolist.filter(item => item.id !== id);
        //更新数据
        setTodolist(newTodo);
    }

    //更新某个todo 的 完成  
    let updateTodo = async (id,done) =>{
        // 向后台发送请求 更新某个todo 完成
       await ReqUpdateTodo(id,done);

        //遍历数据 更新 某个 done 值
        let newTodo = todolist.map(item => {
            if(item.id === id){
                item.done = !item.done;
            }
            return item;
        })

        //更新数据
        setTodolist(newTodo);
    }

    //清除已完成
    let clearOkDone = async ()=>{
       

        await ReqDeleteOkDone(todolist);

        //过滤  done 为 false
        let newTodo = todolist.filter(item => !item.done);
        //更新数据
        setTodolist(newTodo);
    }

    //全选与取消全选
    let checkedAllDone =  async (done)=>{
       
        await ReqCheckedAllDone(todolist,done);

        // 遍历   map
        let newTodo = todolist.map(item => {
            item.done = done;
            return item;
        });

        //更新数据
        setTodolist(newTodo);
    }

    //测试   单独模拟 componnetDidMount
   useEffect(()=>{
        //测试新增一个todo
        // addTodo("测试");
        //测试删除某个todo
        // deleteTodo(3);
        //测试更新某个todo
        // updateTodo(3);
        //测试 清除已完成
        // clearOkDone();
        //测试 全选与取消全选
        // checkedAllDone(false);
   },[])

   //初始化请求数据
   useEffect(()=>{
    async function main(){
        let data = await ReqGetAll()
         //设置状态
        setTodolist(data); 
    }

    main();
       
   },[])


    return (
        <div className="todo-container">
            <ToastContainer />
            <div className="todo-wrap">
               <TodoHeader   addTodo={addTodo} />
               <TodoMain 
                    updateTodo={updateTodo} 
                    todolist={todolist}  
                    deleteTodo={deleteTodo}  
               />
               <TodoFooter 
                    todolist={todolist}
                    clearOkDone={clearOkDone}
                    checkedAllDone={checkedAllDone}
               />
            </div>
        </div>
    )
}
